<template>
  <div>
    <h2>Parent</h2>
    <!-- 1.方式一 -->
    <!-- <Son1 :money="money" :change-money="changeMoney"></Son1> -->
    <!-- 2.方式二 -->
    <!-- click: 不是原生事件 v-on:click="changeMoney" 会被转换成 Son1.$on('click', changeMoney) -->
    <!-- <Son1 :money="money" @click="changeMoney"></Son1> -->
    <!-- .native 绑定原生事件，给组件的最外层元素绑定 -->
    <!-- <Son1 :money="money" @click.native="changeMoney"></Son1> -->
    <!-- 3. 方式三 -->
    <!-- <Son1 v-model="money"></Son1>
    <Son1 :value="money" @input="(value) => (money = value)"></Son1> -->
    <!-- 自定义 v-model value+input 语法糖 -->
    <!-- <Son1 v-model="money"></Son1> -->
    <!-- 4. 方式四 .sync -->
    <!-- <Son1 :money.sync="money"></Son1>
    <Son1 :money="money" @update:money="(value) => (money = value)"></Son1> -->

    <!-- Son2 -->
    <!-- <Son2></Son2> -->

    <!-- Son3 -->
    <Son3
      a="a"
      b="b"
      class="cls"
      style="color: red"
      @play="play"
      @study="study"
    ></Son3>
  </div>
</template>

<script>
// import Son1 from './Son1.vue'
// import Son2 from './Son2.vue'
import Son3 from './Son3.vue'

export default {
  name: 'Parent',
  components: {
    // Son1,
    // Son2
    Son3
  },
  data() {
    return {
      money: 100
    }
  },
  provide() {
    return {
      parent: this
    }
  },
  // mounted() {
  //   console.log('this.$root >>> ', this.$root.$options.name)
  // },
  methods: {
    changeMoney(money) {
      this.money = money
    },
    play() {
      console.log('玩儿 >>> ')
    },
    study() {
      console.log('学习 >>> ')
    }
  }
}
</script>

<style lang="scss" scoped></style>
